<template>
  <div class="com-tip">
    <div class="com-tip-message-show" id="comTip">
      <h4 class="com-tip-message-hd" @mousedown="moveA">
        {{ title }}
        <span class="close" @click="closeTip">
          <i class="iconfont">&#xec47;</i>
          关闭
        </span>
      </h4>
      <div class="com-tip-message-bd">
        <div class="com-tip-message-content">
          <p>{{ tipMessage }}</p>
        </div>
        <div class="com-tip-message-btn">
          <el-button type="primary" size="small" @click="clickSure">{{
            btnY
          }}</el-button>
          <el-button size="small" @click="closeTip">{{ btnN }}</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: () => "提示",
    },
    btnY: {
      type: String,
      default: () => "确定",
    },
    btnN: {
      type: String,
      default: () => "取消",
    },
    tipMessage: {
      type: String,
      default: () => "执行操作？",
    },
  },
  mounted() {
    this.setTop();
  },
  methods: {
    clickSure() {
      this.$emit("clickSure");
    },
    closeTip() {
      this.$emit("closeTip");
    },
    moveA(e) {
      let el = document.getElementById("comTip");
      e = e || window.event;
      // 鼠标到myAdd的距离
      var disX = e.clientX - el.offsetLeft;
      var disY = e.clientY - el.offsetTop;
      document.onmousemove = function (e) {
        var l = e.clientX - disX;
        var t = e.clientY - disY;
        console.log(t);
        if (l <= 250) {
          el.style.left = "250px";
        } else if (l + 250 >= document.body.clientWidth) {
          el.style.left =
            document.body.clientWidth - 8 - el.offsetWidth / 2 + "px";
        } else {
          el.style.left = l + "px";
        }
        if (t <= 0) {
          el.style.top = "0px";
        } else if (t >= document.body.clientHeight - el.offsetHeight) {
          el.style.top = document.body.clientHeight - el.offsetTop - +"px";
        } else {
          el.style.top = t + "px";
        }
      };
      document.onmouseup = function () {
        document.onmousemove = document.onmouseup = null;
      };
    },
    setTop() {
      // topH 卷上去的高度
      let topH =
        document.documentElement.scrollTop ||
        window.pageYOffset ||
        document.body.scrollTop;
      // documentHeight 为可视窗口的高度
      let documentHeight = document.documentElement.clientHeight;
      let h = Math.floor(topH + documentHeight / 2);
      let mcm = document.querySelector(".com-tip-message-show");
      mcm.style.top = h - 100 + "px";
    },
  },
};
</script>

<style>
.com-tip {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1010;
}
.com-tip-message-show {
  position: absolute;
  left: 50vw;
  transform: translateX(-50%);
  height: 200px;
  width: 530px;
  background-color: var(--color-theme-light-5);
  border-radius: 10px;
  box-shadow: 0 0 10px 3px #999;
  overflow: hidden;
  z-index: 1005;
}
.com-tip-message-hd {
  padding: 0 10px 0 20px;
  height: 40px;
  line-height: 40px;
  font-size: 20px;
  color: #f2f2f2;
  background-color: var(--color-theme);
}
.com-tip-message-hd .close {
  position: absolute;
  right: 5px;
  width: 30px;
  height: 30px;
  text-align: center;
  font-size: 0;
  cursor: pointer;
}
.com-tip-message-hd .close .iconfont {
  font-size: 16px;
}
.com-tip-message-bd {
  position: relative;
  width: 100%;
  height: 160px;
}
.com-tip-message-bd .com-tip-message-content {
  position: relative;
  width: 100%;
  height: 110px;
}
.com-tip-message-bd .com-tip-message-content p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 480px;
  text-align: center;
}
.com-tip-message-bd .com-tip-message-btn {
  display: flex;
  justify-content: space-evenly;
  position: relative;
  width: 100%;
}
</style>